/*
 * @Descripttion : 时间选择器
 * @Versions     : 0.1
 * @Author       : foxui team
 * @Date         : 2022-03-06 15:54:58
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2023-02-28 17:02:11
 */

import { _nowDatetime } from './common/utils';
import { Picker } from './picker';
import { spinner } from './spinner';

function Pickertime() {
    Picker.call(this);
    this.HANDLE = '.foxui-time-picker .foxui-picker-handle:not(.is-disabled)';
    this.HANDLE_CLASS = '.foxui-picker-handle';
    this.CONFIRM = '.foxui-time-picker .foxui-picker-bottom .confirm';
    this.CANCEL = '.foxui-time-picker .foxui-picker-bottom .cancel';
    this.SPINNER_ITEM_ACTIVE = '.foxui-spinner .foxui-spinner-item.is-active';
    this.SLIDE = '.foxui-spinner .foxui-spinner-slide';
    this.SHOW_LINE = 5;
}

Object.setPrototypeOf(Pickertime.prototype, Picker.prototype);

Pickertime.prototype._init = function () {
    this._bindFillInput();
    this._bindCancel();

    this._bindToggle(handle => {
        // 展开弹出面板 回调函数 -> 绑定滚动
        spinner._bindScrollForChrome();
        spinner._bindScrollForFirefox();

        // 展开弹出面板 回调函数 -> 设置滑板的位置
        let $handle = $(handle),
            $container = $handle.closest(this.CONTAINER),
            $slide = $container.find(this.SLIDE),
            $active = $container.find(this.SPINNER_ITEM_ACTIVE);

        $active.each(function (index) {
            let $this = $(this),
                eq = parseInt($this.text()),
                lineHeight = Math.round($this.height());

            $($slide[index]).scrollTop(lineHeight * eq);
        });
    });
};

Pickertime.prototype._topHtml = function () {
    return '';
};

Pickertime.prototype._bodyHtml = function (handle) {
    let { hours, minutes, seconds } = _nowDatetime();

    let $handle = $(handle),
        $container = $handle.closest(this.CONTAINER),
        hasSeconds = $container.is('.has-seconds'),
        inputValue = $(handle).find('input').val() || `${hours}:${minutes}:${seconds}`,
        timeArr = inputValue.split(':'),
        html = '';

    if (hasSeconds) {
        html = this._spinnerHtml(24, timeArr[0]) + this._spinnerHtml(60, timeArr[1]) + this._spinnerHtml(60, timeArr[2]);
    } else {
        html = this._spinnerHtml(24, timeArr[0]) + this._spinnerHtml(60, timeArr[1]);
    }

    return ['<div class="foxui-picker-content">', '<div class="spinner-container">', `${html}`, '</div>', '</div>'].join('');
};

Pickertime.prototype._bottomHtml = function () {
    return '<button class="foxui-text-info foxui-size-mini cancel">取消</button><button class="foxui-text-primary foxui-size-mini confirm">确定</button>';
};

Pickertime.prototype._bindFillInput = function () {
    let that = this;
    $(document).on('click', this.CONFIRM, function () {
        let $container = $(this).closest(that.CONTAINER),
            $active = $container.find(that.SPINNER_ITEM_ACTIVE),
            $input = $container.find(that.INPUT),
            timeArr = [];

        $active.each(function () {
            timeArr.push($(this).text());
        });
        $input.val(timeArr.join(':'));

        $container.find(that.MENU).slideUp('fast');
        $container.find(that.HANDLE_CLASS).removeClass('is-active');
    });
};

Pickertime.prototype._bindCancel = function () {
    let that = this;
    $(document).on('click', this.CANCEL, function () {
        let $this = $(this);
        $this.closest(that.MENU).slideUp('fast');
        $this.closest(that.CONTAINER).find(that.HANDLE_CLASS).removeClass('is-active');
    });
};

/**
 * @description:  生成 spinner 主体内容 html
 * @param {*} num       60(分，秒)、24(时)
 * @param {*} current   当前项
 * @return {*}
 * @Date: 2022-03-06 20:16:16
 */
Pickertime.prototype._spinnerHtml = function (num, current) {
    return [
        `<div class="foxui-spinner foxui-time-spinner" data-line="${this.SHOW_LINE}">`,
        '<ul class="foxui-spinner-slide">',
        `${this._itemHtml(num, current)}`,
        '</ul>',
        '<div class="foxui-spinner-indicator"></div>',
        '</div>',
    ].join('');
};

/**
 * @description: 生成 spinnerItem 内容html
 * @param {*} num         60(分，秒)、24(时)
 * @param {*} current     当前项
 * @return {*}
 * @Date: 2022-03-06 20:17:26
 */
Pickertime.prototype._itemHtml = function (num, current) {
    let htmlArr = [],
        emptyNum = parseInt(this.SHOW_LINE / 2);

    current = parseInt(current) || 0;

    for (let i = 0; i < emptyNum; i++) {
        htmlArr.push(`<li class="foxui-spinner-item empty"></li>`);
    }
    for (let i = 0; i < num; i++) {
        htmlArr.push(`<li class="foxui-spinner-item${i === current ? ' is-active' : ''}">${i < 10 ? '0' + i : i}</li>`);
    }
    for (let i = 0; i < emptyNum; i++) {
        htmlArr.push(`<li class="foxui-spinner-item empty"></li>`);
    }
    return htmlArr.join('');
};

let pickertime = new Pickertime();

export { Pickertime, pickertime };
